<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //箭头函数 :带箭头的函数
      //箭头函数的使用
      //一.ES5的函数
      //1.命名函数

      function fn() {
        console.log(111);
      }
      fn();
      //2.匿名函数
      var fn = function () {
        console.log(222);
      };
      fn();

      //二.箭头函数
      //1.直接改 箭头函数
      var fn = function () {
        console.log("fn1");
      };
      fn();

      var fn = () => {
        console.log("fn2");
      };
      fn();

      //2.带参数的箭头函数
      var fn = function (a, b) {
        console.log(a, b);
      };
      fn(1, 2);

      var fn = (a, b) => {
        console.log(a, b);
      };
      fn(3, 4);

      //如果只有一个参数的时候 小括号可以省略
      var fn = function (a) {
        console.log(a);
      };
      fn(999);

      var fn = (a) => {
        console.log(a);
      };
      fn(1000);

      //带返还值的参数改写箭头函数
      var fn = function (a) {
        return a;
      };
      console.log(fn(10));

      var fn = (a) => a;
      console.log(fn(999));

      //箭头函数的应用
      //对象里的函数
      // var obj = {
      //   fn: function () {
      //     console.log("fn");
      //   },
      //   myname: "张三",
      // };
      // var obj = {
      //   fn: () => {
      //     console.log("fn");
      //   },
      //   myname: "张三",
      // };

      //各种回调函数

      // setInterval(function () {
      //   console.log(111);
      // }, 1000);
      // setInterval(() => {
      //   console.log(111);
      // }, 1000);
      /*
      var arr = [1, 2, 3, 4, 5];
      var newArr = arr.map(function (item) {
        return `$${item}`;
      });
      console.log(newArr);

      var arr = [1, 2, 3, 4, 5];
      var newArr = arr.map((item) => `$${item}`);
      console.log(newArr); */

      /* var arr = [1, 2, 3, 4, 5];
      var res = arr.filter(function (item) {
        return item > 3;
      });
      console.log(res);

      var arr = [1, 2, 3, 4, 5];
      var res = arr.filter((item) => item > 3);
      console.log(res); */

      //
      //
      //
      //5.如果返还的内容有歧义,可以用过小括号包裹
      /*     var fn = function () {
        return {
          name: "张三",
          age: 20,
        };
      };
      console.log(fn());

      //var fn = () =>{name: "张三",age: 20,};//这样不能识别大括号是函数的大括号还是对象的大括号
      var fn = () => ({ name: "张三", age: 20 }); //这样不能识别大括号(是函数的大括号还是对象的大括号
      console.log(fn()); */

      var obj = {
        myname: "hello",
        age: 20,
        height: "178cm",
      };
      //  ----转成 字符串 myname=hello&age=20&height=178cm

      var obj = {
        name: "123",
        age: 20,
        height: "178cm",
      };
      //获取对象的所有键名
      console.log(Object.keys(obj));
      console.log(Object.values(obj));

      // var arr = [1, 2, 3, 4, 5];
      // var res = arr.filter((item) => item > 3);
      // console.log(res);
    </script>
  </body>
</html>
